import React, { Component } from 'react'
import './TodoFooter.css';
export default class TodoFooter extends Component {

    render() {
        //获取任务
        let {todos} = this.props;
        //获取总任务数量
        let total = todos.length;
        //获取完成的数量
        let comTotal = todos.filter(item => item.done).length;

        return (
            <div className="todo-footer">
                <label>
                    <input type="checkbox"  checked={total === comTotal && total !== 0}  onChange={this.handleChange} />
                </label>
                <span>
                    {" "}
                    <span>已完成 {comTotal}</span> / 全部 {total}{" "}
                </span>
                <button onClick={this.handleClick} className="btn btn-danger">清除已完成任务</button>
            </div>
        )
    }

    handleChange = (e) => {
        //修改所有任务的状态
        this.props.checkAllTodo(e.target.checked);
    }

    handleClick = () => {
        //调用父级传入的方法
        this.props.removeAllComTodos();
    }
}
